<!--
 * @Title: 数学单调性模拟器
 * @Author: Math_teachaer_fan
 * @Date: 2025年7月23日
 * @Platform: HTML5/JavaScript
 * @Version: 1.0
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单调函数比较</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            padding: 15px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        .control-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
        label {
            font-weight: bold;
        }
        input {
            padding: 5px;
            width: 80px;
        }
        button {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>单调递增与单调递减函数比较</h1>
    <div class="container">
        <div class="controls">
            <div class="control-group">
                <label for="a1">递增函数斜率 (a):</label>
                <input type="number" id="a1" value="1" step="0.1">
            </div>
            <div class="control-group">
                <label for="b1">递增函数截距 (b):</label>
                <input type="number" id="b1" value="0" step="0.1">
            </div>
            <div class="control-group">
                <label for="a2">递减函数斜率 (a):</label>
                <input type="number" id="a2" value="-1" step="0.1">
            </div>
            <div class="control-group">
                <label for="b2">递减函数截距 (b):</label>
                <input type="number" id="b2" value="5" step="0.1">
            </div>
            <div class="control-group">
                <label for="xMin">X最小值:</label>
                <input type="number" id="xMin" value="-5" step="0.1">
            </div>
            <div class="control-group">
                <label for="xMax">X最大值:</label>
                <input type="number" id="xMax" value="5" step="0.1">
            </div>
            <button onclick="drawGraph()">更新图形</button>
        </div>
        <canvas id="functionCanvas" width="700" height="500"></canvas>
    </div>

    <script>
        const canvas = document.getElementById('functionCanvas');
        const ctx = canvas.getContext('2d');
        
        // 初始绘制
        window.onload = drawGraph;
        
        function drawGraph() {
            // 获取输入值
            const a1 = parseFloat(document.getElementById('a1').value);
            const b1 = parseFloat(document.getElementById('b1').value);
            const a2 = parseFloat(document.getElementById('a2').value);
            const b2 = parseFloat(document.getElementById('b2').value);
            const xMin = parseFloat(document.getElementById('xMin').value);
            const xMax = parseFloat(document.getElementById('xMax').value);
            
            // 清除画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 设置坐标系参数
            const padding = 50;
            const graphWidth = canvas.width - 2 * padding;
            const graphHeight = canvas.height - 2 * padding;
            
            // 计算缩放比例
            const xScale = graphWidth / (xMax - xMin);
            const yValues = [];
            
            // 计算y值范围
            for (let x = xMin; x <= xMax; x += 0.1) {
                yValues.push(a1 * x + b1);
                yValues.push(a2 * x + b2);
            }
            
            const yMin = Math.min(...yValues);
            const yMax = Math.max(...yValues);
            const yScale = graphHeight / (yMax - yMin);
            
            // 绘制坐标轴
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 2;
            
            // X轴
            const xAxisY = padding + (0 - yMin) * yScale;
            ctx.beginPath();
            ctx.moveTo(padding, xAxisY);
            ctx.lineTo(padding + graphWidth, xAxisY);
            ctx.stroke();
            
            // Y轴
            const yAxisX = padding + (0 - xMin) * xScale;
            ctx.beginPath();
            ctx.moveTo(yAxisX, padding);
            ctx.lineTo(yAxisX, padding + graphHeight);
            ctx.stroke();
            
            // 绘制刻度
            ctx.font = '12px Arial';
            ctx.fillStyle = '#000';
            ctx.textAlign = 'center';
            
            // X轴刻度
            const xStep = Math.ceil((xMax - xMin) / 10);
            for (let x = Math.ceil(xMin / xStep) * xStep; x <= xMax; x += xStep) {
                const xPos = padding + (x - xMin) * xScale;
                ctx.beginPath();
                ctx.moveTo(xPos, xAxisY - 5);
                ctx.lineTo(xPos, xAxisY + 5);
                ctx.stroke();
                ctx.fillText(x.toFixed(1), xPos, xAxisY + 20);
            }
            
            // Y轴刻度
            const yStep = Math.ceil((yMax - yMin) / 10);
            for (let y = Math.ceil(yMin / yStep) * yStep; y <= yMax; y += yStep) {
                const yPos = padding + (yMax - y) * yScale;
                ctx.beginPath();
                ctx.moveTo(yAxisX - 5, yPos);
                ctx.lineTo(yAxisX + 5, yPos);
                ctx.stroke();
                ctx.fillText(y.toFixed(1), yAxisX - 20, yPos + 5);
            }
            
            // 绘制函数
            ctx.lineWidth = 2;
            
            // 递增函数 (a1*x + b1)
            ctx.strokeStyle = 'blue';
            ctx.beginPath();
            for (let x = xMin; x <= xMax; x += 0.1) {
                const y = a1 * x + b1;
                const xPos = padding + (x - xMin) * xScale;
                const yPos = padding + (yMax - y) * yScale;
                
                if (x === xMin) {
                    ctx.moveTo(xPos, yPos);
                } else {
                    ctx.lineTo(xPos, yPos);
                }
            }
            ctx.stroke();
            
            // 递减函数 (a2*x + b2)
            ctx.strokeStyle = 'red';
            ctx.beginPath();
            for (let x = xMin; x <= xMax; x += 0.1) {
                const y = a2 * x + b2;
                const xPos = padding + (x - xMin) * xScale;
                const yPos = padding + (yMax - y) * yScale;
                
                if (x === xMin) {
                    ctx.moveTo(xPos, yPos);
                } else {
                    ctx.lineTo(xPos, yPos);
                }
            }
            ctx.stroke();
            
            // 添加图例
            ctx.font = '14px Arial';
            ctx.fillStyle = 'blue';
            ctx.textAlign = 'left';
            ctx.fillText(`递增函数: y = ${a1.toFixed(1)}x + ${b1.toFixed(1)}`, padding + 10, padding + 20);
            
            ctx.fillStyle = 'red';
            ctx.fillText(`递减函数: y = ${a2.toFixed(1)}x + ${b2.toFixed(1)}`, padding + 10, padding + 40);
            
            // 添加标题
            ctx.font = '16px Arial';
            ctx.fillStyle = 'black';
            ctx.textAlign = 'center';
            ctx.fillText('单调递增与单调递减函数比较', canvas.width / 2, padding - 20);
        }
    </script>
</body>
</html>